<template>
  <div id="body">
    <div class="logincontent">
      <h1>用户登录</h1>
      <form action="" method="">
        <div class="inputbox">
          <input
            type="text"
            name=""
            required="required"
            id="user"
            autocomplete="off"
            v-model="id"
          />
          <label>Username</label>
        </div>
        <div class="inputbox">
          <input
            type="password"
            name=" "
            required="required"
            id="password"
            autocomplete="off"
            v-model="password"
          />
          <label>Password</label>
        </div>
        <el-radio-group v-model="radio" style="margin-bottom: 10px">
          <el-radio :label="1">学生</el-radio>
          <el-radio :label="2">教师</el-radio>
          <el-radio :label="3">管理员</el-radio>
        </el-radio-group>
        <input type="button" name="" id="" value="登录" @click="login()" />
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: 1,
      password: "",
      id: "",
    };
  },
  methods: {
    login() {
      if (this.radio == 3) {
        this.$api({
          url: "/login/admin",
          method: "post",
          data: {
            id: this.id,
            password: this.password,
          },
          success: (data) => {
            var a =JSON.stringify(data)
            console.log(a)
            let {id, password,aName} = a;
            console.log(a[1])
            window.localStorage.setItem("username", id);
            this.$router.push("adminhome");
          },
        });
      } else {
        this.$api({
          url: "/index/login",
          method: "post",
          data: {
            name: this.count,
            psd: this.psd,
          },
          success: (data) => {
            console.log(data);
            let { name, token, role } = data;
            window.localStorage.setItem("blob-token", token);
            window.localStorage.setItem("username", name);
            if (role == 1) {
              this.$router.push("home");
            } else if (role == 0) {
              this.$router.push("teacherhome");
            }
          },
        });
      }
    },
  },
};
</script>

<style scoped>
.el-radio {
  color: white;
}

#body {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url("../assets/bg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
}
@font-face {
  font-family: ziti;
  src: url("../assets/字体1.ttf");
}

.logincontent {
  position: absolute;
  /*同时水平垂直居中效果（相对于窗口移动）*/
  top: 50%;
  left: 50%;
  /*实现块元素百分比下居中（相对于盒子移动，移动盒子一半的距离）*/
  transform: translate(-50%, -50%);
  width: 450px;
  /*限制盒子大小*/
  box-sizing: border-box;
  padding: 50px;
  border-radius: 15px;
  text-align: center;
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
  text-align: center;
  background: rgba(41, 41, 41, 0.5);
}
.logincontent h1 {
  margin: 0 0 30px; /*上，下，左右*/
  padding: 0;
  color: white;
  font-family: ziti;
}
.logincontent .inputbox {
  position: relative;
}
.logincontent .inputbox input {
  width: 100%;
  padding: 10px 0; /*上下，左右*/
  margin-bottom: 35px;
  border: 0;
  background-color: transparent;
  border-bottom: white 2px solid;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 1px;
  outline: none;
}
#captcha {
  width: 70%;
}
#captcha-img {
  /*background:rgba(255, 255, 255, .5);*/
  background: white;
  margin-bottom: 20px;
  opacity: 0.8;
  border-radius: 5px;
}
.inputbox {
  display: flex;
  justify-content: space-between;
}

.logincontent .inputbox label {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px 0;
  font-size: 16px;
  color: #ffffff;
  pointer-events: none; /*鼠标不可选取内容*/
  transition: 0.5s; /*动作时间*/
}
.logincontent .inputbox input:focus ~ label,
.logincontent .inputbox input:valid ~ label {
  top: -28px;
  left: 0;
  color: cornflowerblue;
  font-size: 14px;
} /*点击和输入的样式*/
.logincontent input[type="button"] {
  width: 100%;
  padding: 15px 0px;
  margin: 10px auto; /*上下10px，左右空间一样*/
  border-radius: 10px;
  border: none;
  background: #f7fa19;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 1px; /*字符间距*/
  cursor: pointer; /*鼠标变成手指*/
  opacity: 0.8; /*透明度*/
  font-family: ziti;
  font-weight: 600;
}
.logincontent input[type="button"]:hover {
  opacity: 1;
  box-shadow: 0px 10px 25px rgba(255, 255, 255, 0.3);
}
.logincontent #a1 {
  margin-top: 20px;
  text-decoration: none;
  float: left;
  font-family: ziti;
  color: white;
  font-weight: 700;
}
.logincontent #a2 {
  margin-top: 20px;
  text-decoration: none;
  float: right;
  font-family: ziti;
  color: white;
  font-weight: 700;
}
</style>